<template>
<div class="app-container demochildren-container">
    <section class="page-box">
        <div class="welcome-container">
            <input type="text" v-model="childrens.name" />
            <input type="text" v-model="lastName" />
        </div>
         <div>父组件的toCity{{toCity}}</div>
         <div>父组件的toPropF{{toPropF}}</div>
        <Comment @showCityName="updateCity" :sendData="toCity" :propF="toPropF" :change="childClick"></Comment>
    </section>
<div id="divv" style="height:700px;width:200px;background:red;"></div>
</div>
</template>

<script>
import Comment from '@/views/example/components/Dropdown/Comment'
export default {
  name: 'SpikeMarketing',
  components: {
    Comment
  },
  mounted: function() {
    window.addEventListener('scroll', this.handleScroll, true) // 监听（绑定）滚轮滚动事件
  },
  created() {
    this.$watch('lastName', function(val, oldval) {
      console.log(val)
    })// 主动调用$watch方法来进行数据监测
  },
  watch: {
    childrens: {
      handler: function(val, oldval) {
        console.log(val.name)
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    },
    'childrens.name': function(val, oldval) {
      console.log(val + 'aaa')
    }, // 键路径必须加上引号
    lastName: function(val, oldval) {
      console.log(this.lastName)
    }
  }, // 以V-model绑定数据时使用的数据变化监测
  data() {
    return {
      value: false,
      toCity: '北京',
      toPropF: 'warning',

      childrens: {
        name: '小强',
        age: 20,
        sex: '男'
      },
      tdArray: ['1', '2'],
      lastName: '张三'
    }
  },
  destroyed: function() {
    window.removeEventListener('scroll', this.handleScroll) //  离开页面清除（移除）滚轮滚动事件
  },
  methods: {

    handleScroll: function() {
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 设备/屏幕高度
      const scrollObj = document.getElementById('divv') // 滚动区域
      const scrollTop = scrollObj.scrollTop // div 到头部的距离
      const scrollHeight = scrollObj.scrollHeight // 滚动条的总高度
      // 滚动条到底部的条件
      console.log(clientHeight, scrollObj, scrollTop, scrollHeight)
      if (scrollTop + clientHeight === scrollHeight) {
        // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
      }
    },
    updateCity(data) { // 触发子组件城市选择-选择城市的事件
      this.toCity = data.cityname// 改变了父组件的值
      console.log('toCity:' + this.toCity)
    },
    childClick(val) { // 这个函数相当于当做参数传到子组件
      console.log(val, 'val')
    }
  }
}
</script>

<style lang="scss" scoped>
.spike-marketing {}
</style>
